<template>
  <div>
    <!-- 查询条件 -->
    <el-row>
      <el-col :span="6">
        <el-input v-model="param.userId" placeholder="请输入用户ID" clearable size="small"></el-input>
        <el-input v-model="param.couponCode" placeholder="请输入优惠卷ID" clearable size="small"></el-input>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="small">查询</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="success" icon="el-icon-plus" @click="showIssueDialog('single')" size="small">对单个用户发放优惠券</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="warning" icon="el-icon-plus" @click="showIssueDialog('all')" size="small">对所有用户发放优惠券</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column prop="couponCode" label="优惠卷编码"></el-table-column>
      <el-table-column prop="claimedAt" label="发放时间"></el-table-column>
      <el-table-column prop="status" label="使用状态">
        <template slot-scope="scope">
          {{ transStatus(scope.row.status) }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 发放优惠券对话框 -->
    <el-dialog :title="issueDialogTitle" :visible.sync="issueDialogVisible" width="30%">
      <el-form :model="newCouponGrant" ref="newCouponGrantForm" label-width="100px">
        <el-form-item v-if="isSingleUserMode" label="用户ID" prop="userId">
          <el-input v-model="newCouponGrant.userId"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷编码" prop="couponCode">
          <el-input v-model="newCouponGrant.couponCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="issueDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewCouponGrant">确 定</el-button>
      </span>
    </el-dialog>




    <el-row>
            <el-col :span="24">
                <!-- 放分页
         layout，表示需要显示的内容
         page-size设置每页多少条-->
                <el-pagination
                        background
                        :page-sizes="[3, 5, 10, 30]"
                        :page-size="pageSize"
                        :current-page="pageNum"
                        layout="total,sizes,prev, pager, next"
                        :total="total"
                        @next-click="nextPage"
                        @prev-click="prevPage"
                        @current-change="changePage"
                        @size-change="changeSize"
                >
                </el-pagination>
            </el-col>
        </el-row>



  </div>
</template>

<script>
export default {
  data() {
    return {
      param: { userId: '' },
      tableData: [],
      STATUS_OPTIONS: {
        '0': '未使用',
        '1': '已使用',
        '2': '过期'
      },
      issueDialogVisible: false,
      isSingleUserMode: true,
      newCouponGrant: {
        userId: '',
        couponCode: ''
      },
            // 分页参数
            pageSize: 5,
      pageNum: 1,
      total: 0,
    };
  },

  methods: {
    handleSearch() {
      this.pageNum = 1; // 重置到第一页
      this.queryPageInfo();
    },
    queryPageInfo() {


      let pageData = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        param: this.param
      };


      // 根据需要修改API路径和参数
      this.$axios.post('/apic/userCoupon/getUserCoupon', pageData)
        .then(resp => {
          if (resp.data.code === 200) {
            this.tableData = resp.data.data.list;
            this.total = resp.data.data.total;
          } else {
            this.$message.error("数据获取失败，请稍后重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    },
    showIssueDialog(type) {
      this.issueDialogVisible = true;
      this.isSingleUserMode = type === 'single';
      this.newCouponGrant = {
        userId: this.isSingleUserMode ? '' : null,
        couponCode: ''
      };
    },
    submitNewCouponGrant() {
      this.$axios.get('/apic/userCoupon/sendCoupon/'+this.newCouponGrant.couponCode)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("发放优惠券成功！");
            this.issueDialogVisible = false;
            this.queryPageInfo();
          } else {
            this.$message.error("发放优惠券失败，请稍后重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    },
    transStatus(statuscode) {
      return this.STATUS_OPTIONS[statuscode] || '未知';
    },

    handleCurrentChange(val) {
        this.currentPage = val;
        // 分页逻辑
      },
      nextPage(val) {
                    //     下一页  回调参数：val 当前页
                    this.pageNum = val
                    this.queryPageInfo();
                },
                prevPage(val) {
                    //     下一页  回调参数：val 当前页
                    this.pageNum = val
                    this.queryPageInfo();
                },
                changePage(val) {
                    this.pageNum = val
                    this.queryPageInfo();
                },
                changeSize(val) {
                    this.pageNum = 1
                    this.pageSize = val
                    this.queryPageInfo()
                },
                queryInfo() {
                    this.pageNum = 1
                    this.queryPageInfo()
                },restart(){
                    this.params={}
                    this.queryPageInfo();
                }
  },
  computed: {
    issueDialogTitle() {
      return this.isSingleUserMode ? "对单个用户发放优惠券" : "对所有用户发放优惠券";
    }
  },
  created() {
    this.queryPageInfo();
  }
};
</script>